<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #PRValue div *{
            margin: 10px 20px;
        }
        input[type='text']{
            width: 300px;
        }
        #params{
            display: inline-block;
            margin: 10px;
        }
        #PRValue div{
            margin-top: 10px;
        }
    </style>
    <script src="../../../../assets/common/plugins/jquery/jquery-3.2.1.min.js"></script>
    <script>
        $.post("/Product/parameterValue" ,function (date) {
         var _val=   date.parameterValue;
        var ob = eval("("+_val+")");
           var i=1;
           for(var ke in ob){ //第一层循环取到各个list
               var _s="<div class='ob' style='border: 1px red solid'></div>";
                 $("#PRValue").append(_s);
                var _inp="参数组：  <input type='text' name='name' value="+ob[ke].name+"><button onclick='delparam(this)'>删除</button><button onclick='addParam(this)'>添加</button><br>";
                       $(".ob").append(_inp);
                   for(var k in ob[ke].parameterGroup){
                       var _InpKey="参数名：  <input name='paramKey' type='text' value="+ob[ke].parameterGroup[k].key+">";
                       var _InpVal="参数值：  <input name='paramVal' type='text' value="+ob[ke].parameterGroup[k].value+"><button onclick='delKeyVal(this)'>删除</button><br>";
                       var keyValue="<span class='keyValue'>"+_InpKey+ _InpVal+"</span>";
                       $(".ob").append(keyValue);
                   }
               i=i+1;
           }
           $("#PRValue").append("<button id='params' onclick='param(this)'> 新增参数组</button>");
        });

        function addParam(obj) {//新增指定参数组的参数
           var I= $(obj).prev().prev().val();//网络   参数组
           var  parentI= $(obj).parent();
           var _sp="参数名：<input name='paramKey' type='text'> 参数值： <input name='paramVal' type='text'><button onclick='delKeyVal(this)'>删除</button><br>";
            var keyValue="<span class='keyValue'>"+_sp+"</span>";
           parentI.append(keyValue);
        }
        function param(obj) {//新增参数组
            var paI=$(obj);
            var _inp="参数组：  <input type='text' value='' name='name'><button onclick='delparam(this)'>删除</button><button onclick='addParam(this)'>添加</button><br>";
            var _div="<div class='ob' style='border: 1px red solid'>"+_inp+"</div>";
            paI.before(_div);
        }

        function delparam(obj) {//删除最大的节点 name开始
           $(obj).parent().remove();
        }
        function delKeyVal(obj) {
         $(obj).parent().remove();
        }
        var paramKey;
        var paramVal;
        var Name ;//参数组名
        var WangMap=new Map();
        var WangsmMap=new Map();
        var srt; //拼接字符
        var bool=false;
        var allstr;
        var callbackdata = function () {//结束自动触发
            var s= $("#PRValue .ob");
            for(var i=1; i<= s.length;i++){//
                $("#PRValue .ob:nth-child("+i+") input").each(function(){
                    /*非空判断*/        if($(this).val()=="" || $(this).val()==null || $(this).val()==undefined || $(this).val()==''){
                        $(this).css("border-color","red");
                        bool=true;
                        return ;
                    }else{
                        bool=false;
                    }

                   if($(this).attr("name")=="name"){
                       Name='"'+$(this).val()+'"';
                   }
                   if($(this).attr("name")=="paramKey"){
                           paramKey='"'+$(this).val()+'"';
                   }
                    if($(this).attr("name")=="paramVal"){
                            paramVal='"'+$(this).val()+'"';
/*                  用这里        ********************/
                        WangsmMap['"key"']=paramKey;
                        WangsmMap['"value"']=paramVal;
                        var json=  ArrTOJson(WangsmMap);
                        if(srt!=undefined && srt!=null && srt!=""){
                            srt= srt+json;
                        }else{
                            srt= json;
                        }
                        alert(srt);
                      paramKey=null;paramVal=null;//清空
                    }
                    /*     用这里    ********************/
                })//each
                if(bool){
                    return ;
                }
                WangMap['"name"']=Name;
                WangMap['"parameterGroup"']=srt;//重要
                    if(allstr==undefined){
                        allstr=ArrTOJson(WangMap);
                    }else{
                        allstr+=ArrTOJson(WangMap);
                    }

                    alert(allstr);

            }//for
            if(bool){
                return ;
            }

            /*                  用这里        ********************/
            var data = {
                username: allstr
            };
            return data;
        }


        function ArrTOJson(arr) {
            var str = "[{";
            var i = 1;
            for(var key in  arr){
                if(i == Object.keys(arr).length){
                    str += key+":"+arr[key];
                }else {
                        str += key+":"+arr[key]+",";
                }
                i++;
            }
            str +="}]";
            return str;
        }

    </script>
</head>
<body>
        <div  id="PRValue" name="">
           </div>
</body>
</html>
